<template>
  <div id="myChart" style="width: 400px; height: 200px"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      chart: null, // 用于保存图表的实例
      option: {
        grid: {
          height: "100px",
          // width: "200px"
          left: "3%", // 控制网格离容器左侧的距离
          right: "4%",
        },
        xAxis: {
          show: true,
          type: "category",
          data: ["直管", "能动", "先投"],
          axisLine: {
            show: false, // 隐藏 X 轴的线条
          },
          axisTick: {
            show: false, // 隐藏 X 轴的刻度线
          },
          axisLabel: {
            show: true, // 显示 X 轴的标签
            // 你还可以设置标签的其他样式，比如文本颜色、旋转角度等
          },
        },
        yAxis: {
          show: false,
        },
        series: [
          {
            data: [120, 150, 130],
            type: "bar",
            barWidth: "35%",
            barGap: "60%",
            // barCategoryGap: "30%",
            itemStyle: {
              barBorderRadius: 15,
              color: "#1818db",
            },
            label: {
              show: true, // 显示标签
              position: "insideTop",
            },
          },
        ],
      },
    };
  },
  mounted() {
    // 假设你的图表容器是一个ID为'myChart'的DOM元素
    this.chart = echarts.init(document.getElementById("myChart"));
    this.chart.setOption(this.option);
  },
  // ... 其他选项，如methods, computed等
};
</script>
<style lang="scss"></style>
